<template>
    <div>
        <div class="nav_bar" v-nav="{
            activeId,
            activeClass: 'item_active'
        }">
            <!--            :class="["nav_item',index === activeId?'item_active':'']"-->
            <!--            class="nav_item"-->
            <!--            :class="index === activeId?'item_active':''"-->
<!--            <div :class="['nav_item',{'item_active':index === activeId}]"-->
            <div class="nav_item"
                 v-for="(item, index) in list"
                 :key="index"
                 @click="activeId=index">
                {{ item }}
            </div>
        </div>


        <h2>==============v-bind=================</h2>
<!--        <p v-my-bind:class="3 === activeId?'item_active':''" v-my-bind:haha="activeId">1234</p>-->
<!--        <p v-my-bind:class="3 === activeId?'item_active':''">1234</p>-->
        <p v-my-bind:class="['nav_item',3 === activeId?'item_active':'']">1234</p>

    </div>
</template>

<script>
export default {
    name: "tabNav",
    directives: {
        myBind: {
            update(el, binding){
                console.log("myBind ===================>",binding);
                if(binding.arg === "class"){
                    let className = "";
                    if(binding.value instanceof Array){
                        className = binding.value.join(" ")
                    }
                    el.setAttribute(binding.arg, className)
                }else {
                    el.setAttribute(binding.arg, binding.value)
                }
            }
        },
        nav: {
            bind(el, binding, vnode){
                // console.log(binding);
                let items = el.children;
                let values = binding.value;
                console.log("v-nav==bind==>",items,values);

                items[values.activeId].classList.add(values.activeClass)

            },
            update(el, binding){
                let items = el.children;
                let values = binding.value;
                let oldValues = binding.oldValue;
                console.log("v-nav==update==>",oldValues,values);

                items[oldValues.activeId].classList.remove(values.activeClass)
                items[values.activeId].classList.add(values.activeClass)
            }
        }
    },
    data() {
        return {
            activeId: 0,
            list: [
                "选项1",
                "选项2",
                "选项3",
                "选项4"
            ]
        }
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.nav_bar {
    width: 500px;
    height: 50px;
    border: 1px solid #000000;
}

.nav_item {
    cursor: pointer;
    float: left;
    width: 25%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #000000;
}

.item_active {
    background: black;
    color: #ffffff;
}
</style>